<template>
  <div class="main">
    <img v-if="personalBg" :src="personalBg" alt>
    <!--<div class="info-container" v-if="isLogin">-->
      <!--<div class="item">-->
        <!--<span class="item-title">姓名</span>-->
        <!--<span class="item-val">{{student.name}}</span>-->
      <!--</div>-->
      <!--<div class="item">-->
        <!--<span class="item-title">班级</span>-->
        <!--<span class="item-val">{{ student.clazz.grade.name + student.clazz.name }}</span>-->
      <!--</div>-->
      <!--<div class="item">-->
        <!--<span class="item-title">学号</span>-->
        <!--<span class="item-val">{{student.code}}</span>-->
      <!--</div>-->
      <!--<div class="btn" :class="{active:actives[0]}">退出账户</div>-->
    <!--</div>-->

    <div class="info-container2">
      <div class="nav">
        <span class="nav_val" :class="{active1: actives[0], active2: isHold[0]}">密码登录</span>
        <span class="nav_val" :class="{active1: actives[1], active2: isHold[1]}">验证码登录</span>
      </div>
      <div class="item">
        <span class="item-title" v-if="!isPhoneSelect">账号</span>
        <span class="item-title" v-if="isPhoneSelect">手机号</span>
        <span class="item-val" :class="{active: actives[2]}">{{inputValue1}}</span>
        <span class="item-val1" :class="{active: actives[5]}" v-if="isPhoneSelect">{{checkMsg}}</span>
      </div>
      <div class="item">
        <span class="item-title" v-if="!isPhoneSelect">密码</span>
        <span class="item-title" v-if="isPhoneSelect">验证码</span>
        <span class="item-val" :class="{active: actives[3]}">{{inputValue2}}</span>
      </div>

      <div class="btn" :class="{active: actives[4]}">登录</div>
    </div>

    <msg :msgValue="msg"></msg>
  </div>
</template>

<script>
  import Navigation from "@/components/Navigation";
  import msg from "@/components/msg";
  import utils from '@/assets/js/utils'


  export default {
    name: "personal",
    backObjName: "personal",
    components: {
      Navigation,
      msg
    },
    props: ["personalBg", "changePersonal"],
    data() {
      return {
        msg: {},
        groups: [105, 106, 107],
        hs: this.$store.state.hs,
        bridge: this.$store.state.bridge,
        actives: [false, false, false, false, false, false],
        isLogin: false,
        isCheckCode: false,
        checkMsg: "获取验证码",
        student: {},
        isPhoneSelect: false,
        inputValue1: "",
        inputValue2: "",
        isHold: [false, false]
      };
    },
    watch: {
      changePersonal: {
        handler: function (val, oldVal) {
          if (val.delete === true) {
            if (this.hs.focObj.group === 106) {
              if (this.hs.focObj.objindex === 0 && this.inputValue1.length > 0) {
                this.inputValue1 = this.inputValue1.substring(
                  0,
                  this.inputValue1.length - 1
                );
              } else if (this.hs.focObj.objindex === 1 && this.inputValue2.length > 0) {
                this.inputValue2 = this.inputValue2.substring(
                  0,
                  this.inputValue2.length - 1
                );
              } else {
                this.actives = [false, false, false, false, false, false];
                this.$emit("closePersonal");
              }
            }
          }
        },
        deep: true
      }
    },
    methods: {
      ...utils,
      getVoiceValue1(val) {
        this.inputValue1 = val;
      },
      getVoiceValue2(val) {
        this.inputValue2 = val;
      },
      initFocs() {
        let _this = this;
        // 处理焦点
        // if (this.isLogin) {
        //   new fObject(105, 0, null, "100-4", "null", "null", "null");
        //   this.hs.fObjCommit();
        //   this.hs.addFocus([105], (group, objid, objindex) => {
        //     //console.log(group + "-" + objindex);
        //     this.$set(this.actives, objindex, true);
        //   });
        //   this.hs.addBlur([105], (group, objid, objindex) => {
        //     this.$set(this.actives, objindex, false);
        //   });
        //
        //   // 处理所有点击逻辑
        //   this.hs.addSelect([105], (group, objid, objindex) => {
        //     this.logoutUser();
        //     this.$router.push("/personal");
        //   });
        // } else {
          new fObject(105, 0, null,
            () => {
              if (!this.personalBg) {
                this.hs.initFocus("100-4");
                this.$emit("closePersonal");
              }
            },
            "106-0",
            null,
            "105-1"
          );
          new fObject(105, 1, null,
            () => {
              if (!this.personalBg) {
                this.hs.initFocus("100-4");
                this.$emit("closePersonal");
              }
            },
            "106-0",
            "105-0",
            null
          );

          new fObject(106, 0, null, "105-1", "106-1", null, () => {
            if (this.isPhoneSelect) {
              this.hs.initFocus("107-0");
            }
          });
          new fObject(106, 1, null, "106-0", "106-2", null, null);
          new fObject(106, 2, null, "106-1", null, null, null);

          new fObject(107, 0, null, null, null, "106-0", null);
          this.hs.fObjCommit();

          this.hs.addFocus([105, 106, 107], (group, objid, objindex) => {
            console.log(group + "-" + objindex);
            if (group === 105) {
              this.$set(this.isHold, objindex, false);
              objindex === 0
                ? (this.isPhoneSelect = false)
                : (this.isPhoneSelect = true);
              this.$set(this.actives, objindex, true);
            } else if (group === 106) {
              // 语音处理
              if (objindex === 0) {
                this.bridge.listenerDridge.subscribe('action.voice', this.getVoiceValue1, true)
              } else if (objindex === 1) {
                this.bridge.listenerDridge.subscribe('action.voice', this.getVoiceValue2, true)
              }
              // 样式
              this.$set(this.actives, 2 + objindex, true);
            } else if (group === 107) {
              this.$set(this.actives, 5, true);
            }
          });
          this.hs.addBlur([105, 106, 107], (group, objid, objindex) => {
            if (group === 105) {
              // if (this.hs.direction === 3 || this.hs.direction === 4 || this.hs.direction === 1){
              this.inputValue1 = "";
              this.inputValue2 = "";
              this.$set(this.actives, objindex, false);
              // }
            } else if (group === 106) {
              objindex === 0 ? _this.bridge.listenerDridge.off('action.voice', this.getVoiceValue1) : _this.bridge.listenerDridge.off('action.voice', this.getVoiceValue2)
              this.$set(this.actives, 2 + objindex, false);
            } else if (group === 107) {
              this.$set(this.actives, 5, false);
            }
          });
          // 处理所有点击逻辑
          this.hs.addSelect([105, 106, 107], (group, objid, objindex) => {
            if (group === 106) {
              if (objindex === 2) {
                if (this.hs.areaLastFocus[105].objindex === 0) {
                  // 账户登录
                  this.userLogin();
                } else {
                  // 验证码登录
                  this.phoneLogin();
                }
              }
            } else if (group === 107) {
              this.getCheckCode();
            }
          });
          this.hs.addBlurArea([105], (group, objid, objindex) => {
            // if (!this.isLogin) {
              this.$set(this.isHold, objindex, true);
            // }
          });

          this.hs.addEvenToList(this.hs.defaultNumberCode, function (keycode) {
            if (_this.hs.focObj.group === 106 &&
              _this.hs.focObj.objindex === 0) {
              _this.inputValue1 += keycode.toString();
            } else if (
              _this.hs.focObj.group === 106 &&
              _this.hs.focObj.objindex === 1
            ) {
              _this.inputValue2 += keycode.toString();
            }
          });
        // }
      },
      getStudent() {
        let status = false;
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/student/current?stbid=" +
          this.bridge.stbid,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              if (data.body) {
                this.student = data.body;
                this.$store.commit("setUser", this.student);
                // this.isLogin = true;
                status = true;
              } else {
                // this.isLogin = false;
              }
            } else {
              this.$store.commit("setUser", this.student);
              // this.isLogin = false;
            }
          }, 0, function (msg) {
          }, 3000
        );
        return status;
      },
      userLogin() {
         // 判断下手机号是不是11位
        if ( !this.inputValue1 && !this.inputValue2) {
          this.msg = {msg: '请输入正确的用户名密码!'};
          return
        }
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/student/login",
          "stbid=" +
          this.bridge.stbid +
          "&username=" +
          this.inputValue1 +
          "&password=" +
          this.inputValue2,
          data => {
            data = JSON.parse(data);
            //console.log(data);

            if (data.head.code !== 1) {
              this.msg = {msg: data.head.desc};
              return;
            }
            this.inputValue1 = ''
            this.inputValue2 = ''
            this.msg = {msg: "登录成功!"};
            this.student = data.body;
            this.$store.commit("setUser", this.student);
            // this.isLogin = true;
            this.hs.areaLastFocus[106] = null;
            this.hs.areaLastFocus[105] = null;
            this.actives = [false, false, false, false, false, false];
            this.$emit("closePersonal");
            this.$emit("login_success");
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      getCheckCode() {
        // 判断下手机号是不是11位
        if (this.checkMobile(this.phone)) {
          this.msg = {msg: '请输入正确的手机号码!'};
          return
        }
        if (!this.isCheckCode) {
          this.hs.ajax.get(
            "http://" +
            this.$store.state.domain +
            "/SMSCH-STB/student/login-code?phone=" +
            this.inputValue1,
            data => {
              data = JSON.parse(data);
              //console.log(data);
              if (data.head.code !== 1) {
                this.msg = {msg: data.head.desc};
                return;
              }
            },
            0,
            function (msg) {
            },
            3000
          );
          this.isCheckCode = true;
          this.checkMsg = 60;
          this.hs.areaLastFocus[106] = null;
          this.hs.initFocus("106-1");
          let checkTime = setInterval(() => {
            this.checkMsg--;
            if (this.checkMsg < 0) {
              clearInterval(checkTime);
              this.checkMsg = "获取验证码";
              this.isCheckCode = false;
            }
          }, 1000);
        }
      },
      phoneLogin() {
         // 判断下手机号是不是11位
        if (this.checkMobile(this.inputValue1 && !this.inputValue2)) {
          this.msg = {msg: '请输入正确的手机号码和验证码!'};
          return
        }
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/student/login-check",
          "stbid=" +
          this.bridge.stbid +
          "&phone=" +
          this.inputValue1 +
          "&code=" +
          this.inputValue2,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code !== 1) {
              this.msg = {msg: data.head.desc};
              return;
            }
            // 清空输入框
            this.inputValue1 = ''
            this.inputValue2 = ''
            // 提示
            this.msg = {msg: "登录成功."};
            this.isCheckCode = false;
            this.student = data.body[0];
            this.$store.commit("setUser", this.student);
            // this.isLogin = true;
            this.hs.areaLastFocus[106] = null;
            this.hs.areaLastFocus[105] = null;
            this.actives = [false, false, false, false, false, false];
            this.$emit("closePersonal");
            this.$emit("login_success");
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      logoutUser() {
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/student/logout?stbid=" +
          this.bridge.stbid +
          "&username=" +
          this.student.username +
          "&password=" +
          this.student.password,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code !== 1) {
              this.msg = {msg: data.head.desc};
              return;
            }
            this.msg = {msg: "退出成功."};
            // this.isLogin = false;
            this.student = {};
            this.$store.commit("setUser", {});
            this.initFocs();
            this.hs.areaLastFocus[106] = null;
            this.hs.areaLastFocus[105] = null;
            this.actives = [false, false, false, false, false, false];
            this.hs.initFocus("105-0");
          },
          0,
          function (msg) {
          },
          3000
        );
      }
    },
    created() {
      // 获取当前登录用户
      // this.getStudent();
      this.initFocs();
    },
    mounted() {
      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        //console.log(JSON.stringify(focArr) + "**************");
        setTimeout(() => {
          this.hs.initFocus(focArr[0], true);
        }, 10)
      }

      // this.bridge.whenKeyBack = () => {
      //   if (this.hs.focObj.group === 106 && this.hs.focObj.objindex < 2) {
      //     if (this.hs.focObj.objindex === 0) {
      //       this.inputValue1 = this.inputValue1.substring(
      //         0,
      //         this.inputValue1.length - 1
      //       );
      //     } else if (this.hs.focObj.objindex === 1) {
      //       this.inputValue2 = this.inputValue2.substring(
      //         0,
      //         this.inputValue2.length - 1
      //       );
      //     }
      //   } else {
      //     this.$bridge.callHandler(
      //       "wasu_function_gotoApplication",
      //       {
      //         packageName: "com.wasu.launcher",
      //         className: "com.wasu.launcher.MainActivity"
      //       },
      //       function (response) {
      //       }
      //     );
      //   }
      // };
    }
  };
</script>
<style scoped lang="less">
  .main {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 1080px;
    .info-container {
      position: absolute;
      top: 313px;
      left: 610px;
      width: 720px;
      height: 579px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .item {
        width: 634px;
        height: 80px;
        padding: 8px;
        display: flex;
        margin-bottom: 60px;
        background: #74c1e5;

        .item-title {
          width: 152px;
          height: 64px;
          line-height: 64px;
          text-align: center;
          background-color: #09508a;
          border-radius: 4px 0px 0px 4px;
          color: #53cfff;
          font-size: 36px;
        }
        .item-val {
          margin-left: 24px;
          font-size: 48px;
          color: #414141;
        }
      }
      .btn {
        text-align: center;
        width: 328px;
        height: 100px;
        background-color: #53cfff;
        border-radius: 49px;
        font-size: 48px;
        line-height: 100px;
      }
      .active {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        border: 2px solid #fff;
        background: #0e60e9;
        color: #fff;
      }
    }
    .info-container2 {
      position: absolute;
      top: 313px;
      left: 610px;
      width: 720px;
      height: 579px;
      display: flex;
      flex-direction: column;
      .nav {
        width: 720px;
        height: 64px;
        /*padding: 8px;*/
        display: flex;
        margin-bottom: 60px;

        border-bottom: #000000 2px solid;
        .nav_val {
          width: 360px;
          height: 64px;
          line-height: 64px;
          text-align: center;
          border-radius: 4px 0px 0px 4px;
          font-size: 39px;
          color: #000000;
        }
        .active1 {
          /*background-color: #09508a;*/
          /*box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);*/
          background-color: #0e60e9;
          color: #f3f992;
          border: 2px solid #fff;
        }
        .active2 {
          background-color: #09508a;
          box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
          color: #f3f992;
        }
      }
      .item {
        width: 1000px;
        height: 80px;
        padding: 8px;
        display: flex;
        margin-bottom: 60px;
        .item-title {
          width: 152px;
          height: 64px;
          line-height: 64px;
          text-align: center;
          border-radius: 4px 0px 0px 4px;
          color: #53cfff;
          font-size: 36px;
        }
        .item-val {
          width: 400px;
          height: 64px;
          line-height: 64px;
          margin-left: 24px;
          font-size: 48px;
          color: #414141;
          background: #74c1e5;
        }
        .item-val1 {
          width: 250px;
          height: 64px;
          line-height: 64px;
          margin-left: 24px;
          font-size: 35px;
          border-radius: 10px;
          text-align: center;
          color: #000;
          background-color: #53cfff;
        }
      }
      .btn {
        text-align: center;
        width: 328px;
        height: 100px;
        background-color: #53cfff;
        border-radius: 49px;
        font-size: 48px;
        line-height: 100px;
        align-self: center;
      }
      .active {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        border: 2px solid #fff;
        background: #0e60e9;
        color: #fff;
      }
    }
  }
</style>
